【7周年記念】Developers.IOをPWA（プログレッシブウェブアプリ）に対応させてみた

ということで、Developers.IOをPWA（プログレッシブウェブアプリ）に対応させてみた

Developers.IO開設7周年の記念として、Developers.IOを PWA（プログレッシブウェブアプリ） に対応させてみました！次のURLから、どなたでも閲覧＆インストールいただけます。なお、コードネームを Developers.IO Ultra としています ^*1。

https://d1j1n414jwjafi.cloudfront.net/

とりあえず一覧がシンプルに表示され、

記事自体も閲覧できるようになっております。

PWAに対応すると、どんな素敵なことが起こるか

最近巷で話題のPWAですが、アプリとしてインストールができるとか、プッシュが送れるとか、今まではストアで公開されているアプリでしかできなかったことが、Webアプリでもできるようになる、という特徴がよく取りざたされています。

• アプリ感覚で操作できる
• 常に最新版が提供できる
• ホーム画面に追加が可能（インストール）
• オフラインでも実行が可能
• プッシュ通知が送れる

PWAについては、次のWebページをお読みいただけると、理解が進みます。

• はじめてのプログレッシブ ウェブアプリ  |  Web  |  Google Developers
• 徹底解説！なぜ今PWA（プログレッシブウェブアプリ）が注目されているのか？ | モナカプレス
• Googleが力を入れるプログレッシブウェブアプリ（PWA）とはなにか？ | SEO研究所サクラサクラボ

PWAに対応させるために実施したこと

今回のPWA化にあたり、大きなトピックとしては次のようなことを実施しました。

• preact-cliを使ってPWAの雛形を一発生成
• WordPress REST APIへの対応
• せっかくなのでデザインをフルリニューアル

今後の展望

今回はブログ開設7周年記念ということで、デモという形で公開させていただきました。デザインも含め、フルリニューアル版を鋭意製作中ですので、正式に日の目を見るのはもう少し先になります。ぜひご期待ください！

これからもDevelopers.IOへの変わらぬご愛顧のほど、よろしくお願いいたします！

諸注意

• 本記事で紹介しているPWAサイトはデモ版です。
• あくまでブログネタの一環としてお楽しみください。
• バグや表示崩れなどが発生する可能性があります。発見しましたら生暖かい目で見守っていてください。
• デモサイトは予告なく公開を終了する可能性がありますのでご留意ください。

脚注